<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>运动兴趣班后台管理2</title>
<!--  <link rel="stylesheet" href="../css/bg/all.css">-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="../css/bg/e3y4m.css">
  <link rel="stylesheet" type="text/css" href="../css/bg/bg.css">
  <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
  <script src="../js/public/jquery-3.7.1.min.js"></script>
  <script src="../js/public/chart.js"></script>
  <script type="text/javascript" src="../js/bg/e3y4m.js"></script>
</head>

<body class="io-white-mode"> 
  <!-- Loading 动画 -->
  <div id="loading">
    <div id="preloader_3"></div>
  </div> 
  <div id="sidebar-mask" class="sidebar-mask" style="display: none;"></div>

  <div class="page-container"> 
    <!-- 侧边栏 -->
    <div id="sidebar" class="sticky sidebar-nav fade"> 
      <div class="modal-dialog h-100 sidebar-nav-inner"> 
        <!-- Logo -->
        <div class="sidebar-logo border-bottom border-color"> 
          <div class="logo overflow-hidden"> 
            <a href="#" class="logo-expanded"> 
              <img src="../img/bg/运动.png" height="40" alt="兴趣班后台管理">
              <h1 class="logo-title">兴趣班后台</h1>
            </a> 
            <a href="#" class="logo-collapsed"> 
              <img src="../img/bg/运动.png" height="40" alt="兴趣班后台管理">
            </a> 
          </div>   
        </div>

        <!-- 侧边栏菜单 -->
        <div class="sidebar-menu flex-fill"> 
          <div class="sidebar-scroll"> 
            <div class="sidebar-menu-inner"> 
              <ul>
                <li class="sidebar-item active">
                  <a href="#dashboard" class="smooth">
                    <i class="fas fa-tachometer-alt icon-fw icon-lg mr-2"></i>
                    <span>数据概览</span>
                  </a>
                </li>
                <li class="sidebar-item">
                  <a href="#term-8"  class="smooth">
                    <i class="fa fa-graduation-cap icon-lg mr-2"></i>
                    <span>课程安排</span>
                    <i class="iconfont icon-arrow-r-m sidebar-more text-sm"></i>
                  </a>
                  <ul> 
                    <li>
                      <a href="#term-8" class="smooth">
                        <span>查看课程安排</span>
                      </a>
                    </li> 
                    <li>
                      <a href="#term-7" class="smooth">
                        <span>添加课程安排</span>
                      </a>
                    </li>
                    <li class="sidebar-item">
                      <a href="#term-10" class="smooth">
                        <span>学生换课申请</span>
                      </a>
                    </li>
                   </ul> 
                </li> 
                <li class="sidebar-item">
                  <a href="#term-9" class="smooth">
                    <i class="fa fa-heart icon-fw icon-lg mr-2"></i>
                    <span>监护人管理</span>
                  </a>
                </li>
                <li class="sidebar-item">
                  <a href="#term-183" class="smooth">
                    <i class="fas fa-bicycle icon-fw icon-lg mr-2"></i>
                    <span>教练团队</span>
                  </a>
                </li>
                <li class="sidebar-item">
                  <a href="#term-39" class="smooth">
                    <i class="fas fa-user-plus icon-fw icon-lg mr-2"></i>
                    <span>员工管理</span>
                  </a>
                </li>
                <li class="sidebar-item">
                  <a href="#term-40" class="smooth">
                    <i class="fa fa-calendar-check-o icon-fw icon-lg mr-2"></i>
                    <span>套餐管理</span>
                  </a>
                </li>
                <li class="sidebar-item">
                  <a href="#term-41" class="smooth">
                    <i class="fas fa-chart-line icon-fw icon-lg mr-2"></i>
                    <span>运营数据分析</span>
                  </a>
                </li>
              </ul> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div>

    <!-- 主内容区域 -->
    <div class="main-content flex-fill">
      <!-- 顶部导航栏 -->
      <div id="header" class="page-header sticky">
        <div class="navbar navbar-expand-md">
          <div class="container-fluid p-0">
            <div class="header-mini-btn">
              <label>
                <input id="mini-button" type="checkbox" checked>
                <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                  <path class="line--1" d="M0 40h62c18 0 18-20-17 5L31 55"/>
                  <path class="line--2" d="M0 50h80"/>
                  <path class="line--3" d="M0 60h62c18 0 18 20-17-5L31 45"/>
                </svg>
              </label>
            </div>
            
            <!-- 右侧用户信息 --> 
            <ul class="nav navbar-menu text-xs order-1 order-md-2">
              <li class="nav-item dropdown">
                  <img src="../img/bg/admin.jpg" class="avatar-img" alt="管理员头像">
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 主要内容容器 -->
      <div class="page-container2">
        <div class="content-wrapper">          
            <!-- 数据概要 -->
            <div id="dashboard" class="content-module active">
              <div class="row mb-4">
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-primary">
                          <i class="fas fa-users"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">总学数</h6>
                          <h3 class="mb-0">2,562</h3>
                          <small class="text-success">
                            <i class="fas fa-arrow-up"></i> 12% 较上月
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-success">
                          <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">活跃教练数</h6>
                          <h3 class="mb-0">32</h3>
                          <small class="text-success">
                            <i class="fas fa-arrow-up"></i> 3% 较上月
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-warning">
                          <i class="fas fa-yuan-sign"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">本月营收</h6>
                          <h3 class="mb-0">¥186,200</h3>
                          <small class="text-success">
                            <i class="fas fa-arrow-up"></i> 8% 较上月
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-info">
                          <i class="fas fa-percentage"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">课程出勤率</h6>
                          <h3 class="mb-0">92%</h3>
                          <small class="text-danger">
                            <i class="fas fa-arrow-down"></i> 2% 较上月
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 图表区域 -->
              <div class="row mb-4">
                <div class="col-md-8">
                  <div class="card">
                    <div class="card-header">
                      <h5 class="card-title mb-0">营收趋势</h5>
                    </div>
                    <div class="card-body">
                      <canvas id="revenueChart" height="300"></canvas>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-header">
                      <h5 class="card-title mb-0">课程分布</h5>
                    </div>
                    <div class="card-body">
                      <canvas id="coursesPieChart" height="300"></canvas>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 最近活动 -->
              <div class="card">
                <div class="card-header">
                  <h5 class="card-title mb-0">最近活动</h5>
                </div>
                <div class="card-body">
                  <div class="activity-stream">
                    <div class="activity-item">
                      <div class="activity-icon bg-primary">
                        <i class="fas fa-user-plus"></i>
                      </div>
                      <div class="activity-content">
                        <div class="activity-time">10分钟前</div>
                        <div class="activity-text">新学员 张小明 报名了少儿足球基础班</div>
                      </div>
                    </div>
                    <div class="activity-item">
                      <div class="activity-icon bg-success">
                        <i class="fas fa-check"></i>
                      </div>
                      <div class="activity-content">
                        <div class="activity-time">30分钟前</div>
                        <div class="activity-text">李教练完成了今日的游泳培训课程</div>
                      </div>
                    </div>
                    <div class="activity-item">
                      <div class="activity-icon bg-warning">
                        <i class="fas fa-calendar"></i>
                      </div>
                      <div class="activity-content">
                        <div class="activity-time">2小时前</div>
                        <div class="activity-text">系统自动生成了下周的课程安排表</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 查看课程安排模块 -->
            <div id="term-8" class="content-module">
              <div class="module-header">
                <h3>课程安排</h3>
                  <div class="col-md-3 controls-container" style="margin-right: 10px;">
                    <select class="form-control">
                    </select>
                  </div>
                  <!-- 新增课程按钮 -->
                  <button class="btn btn-primary" data-toggle="modal" data-target="#addCourseModal">
                    <i class="fas fa-plus"></i> 新增课程
                  </button>
                
                  <button class="btn btn-outline-secondary" onclick="printTable()">
                    <i class="fas fa-print"></i> 打印表格
                  </button>
              </div>
              <!-- 第二个表格 预编辑 -->
              <div class="table-with-navigation">
                <!-- 左侧导航按钮 -->
                <div class="table-navigation-left">
                  <button id="prev-button" class="btn btn-secondary">&#10094;</button>
                </div>
                
                <!-- 表格 -->
                <div class="table-responsive" id="Class_table_1">
                  <table class="table table-hover">
                    <thead>
                      <tr class="table_time"><th colspan="6" height="50px" style="text-align: center;"></th></tr>
                      <tr  style="height: 50px">
                        <th>时间</th>
                        <th class = "course"></th>
                        <th class = "course"></th>
                        <th class = "course"></th>
                        <th class = "course"></th>
                        <th class = "course"></th>
                      </tr>
                    </thead>
                    <tbody id="course-table-body">
                      <!-- 表格数据将通过 JavaScript 动态填充 -->
                      <tr class="first"  style="height: 75px">
                          <th>AM 8.00~9.00</th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                      </tr>
                      <tr class="second"  style="height: 75px">
                        <th>AM 9.30~10.30</th>
                        <th class = "course"></th>
                        <th class = "course"></th>
                        <th class = "course"></th>
                        <th class = "course"></th>
                        <th class = "course"></th>
                      </tr>
                      <tr>
                        <th colspan="6" height="50px" style="text-align: center; width: 50px">下午</th>
                      </tr>
                       <tr class="third" style="height: 75px">
                          <th>PM 14.00~15.00</th>
                         <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                       </tr>
                       <tr class="fourth" style="height: 75px">
                          <th>PM 15.30~16.30</th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                          <th class = "course"></th>
                       </tr>
                    </tbody>
                   </table>
                </div>
                <!-- 右侧导航按钮 -->
                <div class="table-navigation-right">
                  <button id="next-button" class="btn btn-secondary">&#10095;</button>
                </div>
              </div>
            </div>
            <!-- 添加课程安排模块 -->
            <div id="term-7" class="content-module">
              <div class="module-header">
                <h3>预编辑课程安排</h3>
                  <div class="col-md-3 controls-container" style="margin-right: 10px;">
                    <select class="form-control">
                    </select>
                  </div>
                  <!-- 新增课程按钮 -->
                  <button class="btn btn-primary" data-toggle="modal" data-target="#addCourseModal">
                    <i class="fas fa-plus"></i> 新增课程
                  </button>
                <button class="btn btn-outline-secondary">
                  <i class="fas fa-check"></i> 提交课程安排
                </button>

              </div>
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr class="table_time"><th colspan="6" height="50px" style="text-align: center;height: 50px">2024年11月第4周</th></tr>
                    <tr style="height: 50px">
                      <th>时间</th>
                      <th class="class"></th>
                      <th class="class"></th>
                      <th class="class"></th>
                      <th class="class"></th>
                      <th class="class"></th>
                    </tr>
                  </thead>
                  <tbody id="course-table-body">
                    <!-- 表格数据将通过 JavaScript 动态填充 -->
                    <tr>
                        <th>AM 8.00~9.00</th>
                        <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                        <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                        <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                        <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                        <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                    </tr>
                    <tr>
                      <th>AM 8.00~9.00</th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                    </tr>
                    <tr>
                      <th colspan="6" height="50px" style="text-align: center;">下午</th>
                    </tr>
                    <tr>
                      <th>AM 8.00~9.00</th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                    </tr>
                    <tr>
                      <th>AM 8.00~9.00</th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                      <th data-toggle="modal" data-target="#addCourseScheduleModal" class="class"></th>
                    </tr>
                  </tbody>
                 </table>
              </div>

            </div>
            <!-- 监护人管理模块 -->
            <div id="term-9" class="content-module">
              <div class="module-header">
                <h3>监护人管理</h3>
                <button class="btn btn-primary" data-toggle="modal" data-target="#addGuardianModal">
                  <i class="fas fa-plus"></i> 添加监护人
                </button>
              </div>

              <div class="card">
                <div class="card-body">
                  <div class="row mb-3">
                    <div class="col-md-4">
                      <input type="text" class="form-control" placeholder="搜索监护人姓名/电话">
                    </div>
                    <div class="col-md-2">
                      <button class="btn btn-primary btn-block">
                        <i class="fas fa-search"></i> 搜索
                      </button>
                    </div>
                  </div>

                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>监护人姓名</th>
                          <th>联系电话</th>
                          <th>
                            消费总额
                            <span class="sort-icons">
                              <i class="fas fa-caret-up sort-icon" data-sort="asc"></i>
                              <i class="fas fa-caret-down sort-icon" data-sort="desc"></i>
                            </span>
                          </th>
                          <th>会员等级 </th>
                          <th>
                            注册时间
                            <span class="sort-icons">
                              <i class="fas fa-caret-up sort-icon" data-sort="asc"></i>
                              <i class="fas fa-caret-down sort-icon" data-sort="desc"></i>
                            </span>
                          </th>
                          <th>
                            最近登录
                          </th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>张三</td>
                          <td>13900000001</td>
                          <td>¥1000</td>
                          <td>VIP</td>
                          <td>2024-01-01</td>
                          <td>2024-01-01</td>
                          <td class="sidebar-item">
                            <button class="btn btn-sm btn-info" title="发信息"><i class="fas fa-envelope"></i></button>
                            <a href="#term-42" class="smooth"><button class="btn btn-sm btn-warning" title="信息详细"><i class="fas fa-eye"></i></button></a>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>    

                  <!-- 分页 -->
                  <nav class="mt-3">
                    <ul class="pagination justify-content-end">
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
            <!-- 教练团队模块 -->
            <div id="term-183" class="content-module">
              <div class="module-header">
                <h3>教练团队</h3>
                <button class="btn btn-primary" data-toggle="modal" data-target="#addCoachModal">
                  <i class="fas fa-plus"></i> 添加教练
                </button>
              </div>

              <!-- 教练统计卡片 -->
              <div class="row mb-4">
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-primary">
                          <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">在职教练</h6>
                          <h3 class="mb-0">32</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-success">
                          <i class="fas fa-chalkboard-teacher"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">本周课时</h6>
                          <h3 class="mb-0">286</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-warning">
                          <i class="fas fa-star"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">平均评分</h6>
                          <h3 class="mb-0">4.8</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-info">
                          <i class="fas fa-users"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">职员员总数</h6>
                          <h3 class="mb-0">1,268</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 教练练列表 -->
              <div class="row layui-row" style="border: 1px red solid">
                <!-- 教练卡片 -->
                  <div class="card coach-card ">
                    <div class="card-body text-center">
                      <div class="coach-avatar mb-3">
                        <img src="../img/avatar/emp/3.png" alt="教练头像" class="rounded-circle">
                      </div>
                      <h5 class="coach-name">王教练</h5>
                      <p class="coach-title text-muted">足球主教练</p>
                      <div class="coach-info text-left mb-3">
                        <p><i class="fas fa-medal"></i> 5年教学经验</p>
                        <p><i class="fas fa-certificate"></i> 国家级教练证书</p>
                        <p><i class="fas fa-users"></i> 带班数：4个</p>
                        <p><i class="fas fa-star text-warning"></i> 评分：4.9</p>
                      </div>
                      <div class="coach-actions">
                        <button class="btn btn-sm btn-info mr-2">编辑资料</button>
                        <button class="btn btn-sm btn-success">查看课程</button>
                      </div>
                    </div>
                  </div>
                  <div class="card coach-card">
                    <div class="card-body text-center">
                      <div class="coach-avatar mb-3">
                        <img src="../img/avatar/emp/3.png" alt="教练头像" class="rounded-circle">
                      </div>
                      <h5 class="coach-name">王教练</h5>
                      <p class="coach-title text-muted">足球主教练</p>
                      <div class="coach-info text-left mb-3">
                        <p><i class="fas fa-medal"></i> 5年教学经验</p>
                        <p><i class="fas fa-certificate"></i> 国家级教练证书</p>
                        <p><i class="fas fa-users"></i> 带班数：4个</p>
                        <p><i class="fas fa-star text-warning"></i> 评分：4.9</p>
                      </div>
                      <div class="coach-actions">
                        <button class="btn btn-sm btn-info mr-2">编辑资料</button>
                        <button class="btn btn-sm btn-success">查看课程</button>
                      </div>
                    </div>
                  </div>
                  <div class="card coach-card">
                    <div class="card-body text-center">
                      <div class="coach-avatar mb-3">
                        <img src="../img/avatar/emp/3.png" alt="教练头像" class="rounded-circle">
                      </div>
                      <h5 class="coach-name">王教练</h5>
                      <p class="coach-title text-muted">足球主教练</p>
                      <div class="coach-info text-left mb-3">
                        <p><i class="fas fa-medal"></i> 5年教学经验</p>
                        <p><i class="fas fa-certificate"></i> 国家级教练证书</p>
                        <p><i class="fas fa-users"></i> 带班数：4个</p>
                        <p><i class="fas fa-star text-warning"></i> 评分：4.9</p>
                      </div>
                      <div class="coach-actions">
                        <button class="btn btn-sm btn-info mr-2">编辑资料</button>
                        <button class="btn btn-sm btn-success">查看课程</button>
                      </div>
                    </div>
                  </div>
                  <div class="card coach-card">
                    <div class="card-body text-center">
                      <div class="coach-avatar mb-3">
                        <img src="../img/avatar/emp/3.png" alt="教练头像" class="rounded-circle">
                      </div>
                      <h5 class="coach-name">王教练</h5>
                      <p class="coach-title text-muted">足球主教练</p>
                      <div class="coach-info text-left mb-3">
                        <p><i class="fas fa-medal"></i> 5年教学经验</p>
                        <p><i class="fas fa-certificate"></i> 国家级教练证书</p>
                        <p><i class="fas fa-users"></i> 带班数：4个</p>
                        <p><i class="fas fa-star text-warning"></i> 评分：4.9</p>
                      </div>
                      <div class="coach-actions">
                        <button class="btn btn-sm btn-info mr-2">编辑资料</button>
                        <button class="btn btn-sm btn-success">查看课程</button>
                      </div>
                    </div>
                  </div>
                  <div class="card coach-card">
                    <div class="card-body text-center">
                      <div class="coach-avatar mb-3">
                        <img src="../img/avatar/emp/3.png" alt="教练头像" class="rounded-circle">
                      </div>
                      <h5 class="coach-name">王教练</h5>
                      <p class="coach-title text-muted">足球主教练</p>
                      <div class="coach-info text-left mb-3">
                        <p><i class="fas fa-medal"></i> 5年教学经验</p>
                        <p><i class="fas fa-certificate"></i> 国家级教练证书</p>
                        <p><i class="fas fa-users"></i> 带班数：4个</p>
                        <p><i class="fas fa-star text-warning"></i> 评分：4.9</p>
                      </div>
                      <div class="coach-actions">
                        <button class="btn btn-sm btn-info mr-2">编辑资料</button>
                        <button class="btn btn-sm btn-success">查看课程</button>
                      </div>
                    </div>
                  </div>
                  <div class="card coach-card">
                    <div class="card-body text-center">
                      <div class="coach-avatar mb-3">
                        <img src="../img/avatar/emp/3.png" alt="教练头像" class="rounded-circle">
                      </div>
                      <h5 class="coach-name">王教练</h5>
                      <p class="coach-title text-muted">足球主教练</p>
                      <div class="coach-info text-left mb-3">
                        <p><i class="fas fa-medal"></i> 5年教学经验</p>
                        <p><i class="fas fa-certificate"></i> 国家级教练证书</p>
                        <p><i class="fas fa-users"></i> 带班数：4个</p>
                        <p><i class="fas fa-star text-warning"></i> 评分：4.9</p>
                      </div>
                      <div class="coach-actions">
                        <button class="btn btn-sm btn-info mr-2">编辑资料</button>
                        <button class="btn btn-sm btn-success">查看课程</button>
                      </div>
                    </div>
                  </div>
                <!-- 更多教练卡片 -->
              </div>
            </div>
            <!-- 员工管理模块 -->
            <div id="term-39" class="content-module">
              <div class="module-header">
                <h3>员工管理</h3>
                <button class="btn btn-primary" data-toggle="modal" data-target="#addEmployeeModal">
                  <i class="fas fa-plus"></i> 添加员工
                </button>
              </div>

              <!-- 员工统计 -->
              <div class="row mb-4">
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-primary">
                          <i class="fas fa-users"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">在职员工</h6>
                          <h3 class="mb-0">42</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-success">
                          <i class="fas fa-user-plus"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">本月新入职</h6>
                          <h3 class="mb-0">3</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-danger">
                          <i class="fas fa-user-minus"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">本月离</h6>
                          <h3 class="mb-0">1</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-sm-6 col-lg-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-info">
                          <i class="fas fa-clock"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">平均工龄</h6>
                          <h3 class="mb-0">2.5年</h3>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 员工列表 -->
              <div class="card">
                <div class="card-body">
                  <div class="row mb-3">
                    <div class="col-md-3">
                      <select class="form-control">
                        <option>所有部门</option>
                        <option>教学部</option>
                        <option>市场部</option>
                        <option>行政部</option>
                      </select>
                    </div>
                    <div class="col-md-3">
                      <select class="form-control">
                        <option>在职状态</option>
                        <option>在</option>
                        <option>离职</option>
                        <option>试用期</option>
                      </select>
                    </div>
                    <div class="col-md-3">
                      <input type="text" class="form-control" placeholder="搜索员工姓名/工号">
                    </div>
                    <div class="col-md-3">
                      <button class="btn btn-primary btn-block">
                        <i class="fas fa-search"></i> 搜索
                      </button>
                    </div>
                  </div>

                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>工号</th>
                          <th>姓名</th>
                          <th>部门</th>
                          <th>职位</th>
                          <th>入职日期</th>
                          <th>联系电话</th>
                          <th>状态</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>EMP001</td>
                          <td>张明</td>
                          <td>教学部</td>
                          <td>主管教练</td>
                          <td>2023-09-01</td>
                          <td>13900000001</td>
                          <td><span class="badge badge-success">在</span></td>
                          <td>
                            <button class="btn btn-sm btn-info" title="编辑"><i class="fas fa-edit"></i></button>
                            <button class="btn btn-sm btn-warning" title="查看详情"><i class="fas fa-eye"></i></button>
                            <button class="btn btn-sm btn-danger" title="离职"><i class="fas fa-user-times"></i></button>
                          </td>
                        </tr>
                        <!-- 更多员工数据 -->
                      </tbody>
                    </table>
                  </div>

                  <!-- 分页 -->
                  <nav class="mt-3">
                    <ul class="pagination justify-content-end">
                      <li class="page-item disabled">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                      </li>
                      <li class="page-item active"><a class="page-link" href="#">1</a></li>
                      <li class="page-item"><a class="page-link" href="#">2</a></li>
                      <li class="page-item"><a class="page-link" href="#">3</a></li>
                      <li class="page-item">
                        <a class="page-link" href="#">下一页</a>
                      </li>
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
            <!-- 套餐管理模块 -->
            <div id="term-40" class="content-module">
              <div class="module-header">
                <h3>套餐管理</h3>
                <button class="btn btn-primary" data-toggle="modal" data-target="#addPackageModal">
                  <i class="fas fa-plus"></i> 新增套餐
                </button>
              </div>

              <!-- 套餐卡片列表 -->
              <div class="row">
                <!-- 基础套餐 -->
                <div class="col-md-4 mb-4">
                  <div class="card package-card">
                    <div class="card-header bg-primary text-white">
                      <h5 class="mb-0">基础套餐</h5>
                    </div>
                    <div class="card-body">
                      <div class="price-tag text-center mb-4">
                        <span class="currency">¥</span>
                        <span class="amount">1288</span>
                        <span class="period">/季度</span>
                      </div>
                      <ul class="package-features">
                        <li><i class="fas fa-check text-success"></i> 每周2次课</li>
                        <li><i class="fas fa-check text-success"></i> 基础器材使用</li>
                        <li><i class="fas fa-check text-success"></i> 体能测试</li>
                        <li><i class="fas fa-check text-success"></i> 场地使用</li>
                      </ul>
                      <div class="package-actions mt-4">
                        <button class="btn btn-info btn-block mb-2">编辑套餐</button>
                        <button class="btn btn-danger btn-block">下架套餐</button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 进阶套餐 -->
                <div class="col-md-4 mb-4">
                  <div class="card package-card">
                    <div class="card-header bg-success text-white">
                      <h5 class="mb-0">进阶套餐</h5>
                    </div>
                    <div class="card-body">
                      <div class="price-tag text-center mb-4">
                        <span class="currency">¥</span>
                        <span class="amount">2388</span>
                        <span class="period">/季度</span>
                      </div>
                      <ul class="package-features">
                        <li><i class="fas fa-check text-success"></i> 每周3次课程</li>
                        <li><i class="fas fa-check text-success"></i> 高级器材使用</li>
                        <li><i class="fas fa-check text-success"></i> 专业体能测试</li>
                        <li><i class="fas fa-check text-success"></i> VIP场地使</li>
                        <li><i class="fas fa-check text-success"></i> 对指导</li>
                      </ul>
                      <div class="package-actions mt-4">
                        <button class="btn btn-info btn-block mb-2">编辑套餐</button>
                        <button class="btn btn-danger btn-block">下架套餐</button>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 精英套餐 -->
                <div class="col-md-4 mb-4">
                  <div class="card package-card">
                    <div class="card-header bg-warning text-white">
                      <h5 class="mb-0">精英套餐</h5>
                    </div>
                    <div class="card-body">
                      <div class="price-tag text-center mb-4">
                        <span class="currency">¥</span>
                        <span class="amount">3688</span>
                        <span class="period">/季度</span>
                      </div>
                      <ul class="package-features">
                        <li><i class="fas fa-check text-success"></i> 无限次课程</li>
                        <li><i class="fas fa-check text-success"></i> 全材使用</li>
                        <li><i class="fas fa-check text-success"></i> 专���体能规划</li>
                        <li><i class="fas fa-check text-success"></i> 专属场地使用</li>
                        <li><i class="fas fa-check text-success"></i> 一对一专属教练</li>
                        <li><i class="fas fa-check text-success"></i> 营养餐指导</li>
                      </ul>
                      <div class="package-actions mt-4">
                        <button class="btn btn-info btn-block mb-2">编辑套餐</button>
                        <button class="btn btn-danger btn-block">下架套餐</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 运营数据分析模块 -->
            <div id="term-41" class="content-module">
              <div class="module-header">
                <h3>运营数据分析</h3>
                <div>
                  <button class="btn btn-outline-primary mr-2">
                    <i class="fas fa-download"></i> 导出报表
                  </button>
                  <button class="btn btn-outline-secondary">
                    <i class="fas fa-print"></i> 打印报表
                  </button>
                </div>
              </div>

              <!-- 数据概览 -->
              <div class="row mb-4">
                <div class="col-md-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-primary">
                          <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">营收</h6>
                          <h3 class="mb-0">¥1,286,500</h3>
                          <small class="text-success">
                            <i class="fas fa-arrow-up"></i> 15.2% 较上月
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-success">
                          <i class="fas fa-users"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">活跃会员</h6>
                          <h3 class="mb-0">1,865</h3>
                          <small class="text-success">
                            <i class="fas fa-arrow-up"></i> 8.3% 较上月
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-warning">
                          <i class="fas fa-calendar-check"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">课程数</h6>
                          <h3 class="mb-0">486</h3>
                          <small class="text-success">
                            <i class="fas fa-arrow-up"></i> 5.7% 较上月
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="card stat-card">
                    <div class="card-body">
                      <div class="d-flex align-items-center">
                        <div class="icon-box bg-info">
                          <i class="fas fa-star"></i>
                        </div>
                        <div class="ml-3">
                          <h6 class="mb-1">满度</h6>
                          <h3 class="mb-0">96%</h3>
                          <small class="text-success">
                            <i class="fas fa-arrow-up"></i> 2.1% 较上月
                          </small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 图表区域 -->
              <div class="row mb-4">
                <div class="col-md-8">
                  <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <h5 class="card-title mb-0">营收趋势</h5>
                      <div class="btn-group">
                        <button class="btn btn-outline-secondary btn-sm active">月</button>
                        <button class="btn btn-outline-secondary btn-sm">季度</button>
                        <button class="btn btn-outline-secondary btn-sm">年度</button>
                      </div>
                    </div>
                    <div class="card-body">
                      <canvas id="revenueAnalysisChart" height="300"></canvas>
                    </div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="card">
                    <div class="card-header">
                      <h5 class="card-title mb-0">收入来源分布</h5>
                    </div>
                    <div class="card-body">
                      <canvas id="revenuePieChart" height="300"></canvas>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 详细数据表格 -->
              <div class="card">
                <div class="card-header">
                  <h5 class="card-title mb-0">详细数据</h5>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>时间</th>
                          <th>营收(元)</th>
                          <th>新增会员</th>
                          <th>课程数</th>
                          <th>出勤率</th>
                          <th>满意度</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>2024-03</td>
                          <td>286,500</td>
                          <td>156</td>
                          <td>486</td>
                          <td>92%</td>
                          <td>96%</td>
                        </tr>
                        <tr>
                          <td>2024-02</td>
                          <td>248,600</td>
                          <td>142</td>
                          <td>460</td>
                          <td>90%</td>
                          <td>94%</td>
                        </tr>
                        <!-- 更多数据行 -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <!-- 监护人信息模块 -->
            <div id="term-42" class="content-module" style="margin-top: 50px;">
              <div class="module-header">
                <h3 class="sidebar-item header-ad">
                  <a href="#term-9" class="smooth">监护人管理</a> >
                  <a href="#term-42" class="smooth"> 监护人详细信息</a>
                </h3>
              </div>

              <!-- 添加三列布局 -->
              <div class="row mt-4">
                  <!-- 左侧基本信息 -->
                  <div class="col-md-3">
                      <div class="card">
                          <div class="card-header">
                              <h5 class="card-title mb-0">基本信息</h5>
                          </div>
                          <div class="card-body">
                              <!-- 添加隐藏的监护人ID -->
                              <input type="hidden" id="guardianDetailId">
                              <div class="text-center mb-4">
                                  <img id="guardianDetailAvatar" src="../img/bg/default-avatar.jpg" 
                                       class="rounded-circle img-fluid" 
                                       style="width: 150px; height: 150px; object-fit: cover;"
                                       alt="监护人头像">
                                  <h4 class="mt-3" id="guardianDetailName">加载中...</h4>
                                  <span class="badge badge-primary" id="guardianDetailVip">VIP等级</span>
                              </div>
                              <div class="basic-info-list">
                                  <div class="info-item">
                                      <label>手机号码：</label>
                                      <span id="guardianDetailPhone">加载中...</span>
                                  </div>
                                  <div class="info-item">
                                      <label>消费总额：</label>
                                      <span id="guardianDetailSpend">加载中...</span>
                                  </div>
                                  <div class="info-item">
                                      <label>注册时间：</label>
                                      <span id="guardianDetailRegDate">加载中...</span>
                                  </div>
                                  <div class="info-item">
                                      <label>上次登录：</label>
                                      <span id="guardianDetailLastLogin">加载中...</span>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  
                  <!-- 中间域 - 套餐信息 -->
                  <div class="col-md-5">
                      <div class="card">
                          <div class="card-header">
                              <h5 class="card-title mb-0">套餐信息</h5>
                          </div>
                          <div class="card-body">
                              <div class="current-package mb-4">
                                  <h6 class="text-muted mb-3">当前套餐</h6>
                                  <div class="package-info">
                                      <div class="d-flex justify-content-between align-items-center">
                                          <h4 id="currentPackageName">进阶套餐</h4>
                                          <span class="badge badge-success">使用中</span>
                                      </div>
                                      <div class="progress mt-2 mb-2">
                                          <div class="progress-bar" role="progressbar" style="width: 0%;" 
                                               aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">65%</div>
                                      </div>
                                      <div class="d-flex justify-content-between text-muted">
                                        <small>剩余课时：<span id="syu">24课时</span></small>
                                          <small>有效期至：<span id="dateyoux">2024-12-31</span></small>
                                      </div>
                                  </div>
                              </div>
                              
                              <div class="package-history">
                                  <h6 class="text-muted mb-3">购买记录</h6>
                                  <div class="table-responsive">
                                      <table class="table table-hover">
                                          <thead>
                                              <tr>
                                                  <th>套餐名称</th>
                                                  <th>截至日期</th>
                                                  <th>金额</th>
                                                  <th>状态</th>
                                              </tr>
                                          </thead>
                                          <tbody id="packageHistoryList">
                                              <!-- 据将通过JavaScript动态填充 -->
                                          </tbody>
                                      </table>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  
                  <!-- 右侧区域 - 孩子信息 -->
                  <div class="col-md-4">
                      <div class="card">
                          <div class="card-header d-flex justify-content-between align-items-center">
                              <h5 class="card-title mb-0">孩子信息</h5>
                              <select id="childrenSelector" class="form-control" style="width: 120px;">

                              </select>
                          </div>
                          <div class="card-body">
                              <!-- 基本信息卡片 -->
                              <div class="child-card mb-4">
                                  <div class="d-flex align-items-center">
                                      <div class="mr-3">
                                          <img src="../img/bg/default-avatar.jpg" 
                                               class="rounded-circle"
                                               style="width: 50px; height: 50px; object-fit: cover;"
                                               alt="学生头像">
                                      </div>
                                      <div>
                                          <div class="d-flex align-items-center mb-1">
                                              <h6 class="mb-0 mr-2">小明</h6>
                                              <span class="badge badge-primary badge-xs">男</span>
                                          </div>
                                          <small class="text-muted">
                                              学号：<span>S001</span> | 年龄：<span>10岁</span>
                                          </small>
                                      </div>
                                  </div>
                              </div>

                              <!-- 上课记录 -->
                              <div class="course-history">
                                  <h6 class="text-muted mb-3">上课记录</h6>
                                  <div class="course-list" style="max-height: 400px; overflow-y: auto; padding-right: 15px;">

                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
            </div>
            <!-- 学生换课申请模块 -->
            <div id="term-10" class="content-module">
              <div class="module-header">
                <h3>学生换课申请</h3>
              </div>
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>学生姓名</th>
                      <th>原课程信息</th>
                      <th>申请换课信息</th>
                      <th>
                        申请时间
                        <button id="sortByApplicationTime" class="sort-button">
                          <i class="fas fa-sort"></i>
                        </button>
                      </th>
                      <th>
                        状态
                        <button id="sortByStatus" class="sort-button">
                          <i class="fas fa-sort"></i>
                        </button>
                      </th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody id="change-request-table-body">
                    <!-- 表格数据将通过 JavaScript 动态填充 -->
                  </tbody>
                </table>
                <div id="pagination" class="pagination">
                  <button id="prevPage" class="btn btn-secondary">上一页</button>
                  <span id="pageInfo"></span>
                  <button id="nextPage" class="btn btn-secondary">下一页</button>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
<!-- 新增课程安排模态框 -->
<div class="modal fade" id="addCourseScheduleModal" tabindex="-1" role="dialog" aria-labelledby="addCourseScheduleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addCourseScheduleModalLabel">新增课程安排</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="courseName">课程名称</label>
            <select class="form-control" id="courseName">
              <option>选择课程</option>

            </select>
          </div>
          <div class="form-group">
            <label for="courseTime">课程时间</label>
            <input type="text" class="form-control" id="courseTime" placeholder="请输入课程时间" disabled>
          </div>
          <div class="form-group">
            <label for="courseInstructor">授课教练</label>
            <select class="form-control" id="courseInstructor">
              <option>请选择教练</option>
              <option>龙教练</option>
              <option>王教练</option>
              <option>徐文斌</option>
            </select>
          </div>
          <!-- 新增场地选择 -->
          <div class="form-group">
            <label for="courseLocation">课程场地</label>
            <select class="form-control" id="courseLocation">
              <option>请选择场地</option>
              <option>体育馆</option>
              <option>游泳池</option>
              <option>室内场地</option>
            </select>
          </div>
          <!-- 新增人数输入 -->
          <div class="form-group">
            <label for="courseCapacity">课程人数</label>
            <input type="number" class="form-control" id="courseCapacity" placeholder="请输入课程人数" value="50">
          </div>
          <!-- 在态中添加一个隐藏的输入字段用于存ID -->
          <input type="hidden" id="courseId">
          
          <!-- 添加穿梭框容器 -->
          <div class="form-group">
            <label>选择学生</label>
            <div id="ID-transfer-demo-showSearch" class="demo-transfer"></div>
          </div>
          
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

<!-- 新增课程模态框 -->
<div class="modal fade" id="addCourseModal" tabindex="-1" role="dialog" aria-labelledby="addCourseModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addCourseModalLabel">新增课程</h5>
        <button type="button" the="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="newCourseName">课程名称</label>
            <input type="text" class="form-control" id="newCourseName" placeholder="请输入新课程名称">
          </div>
          <div class="form-group">
            <label for="newCourseDescription">课程描述</label>
            <textarea class="form-control" id="newCourseDescription" rows="3" placeholder="请输入课程描述"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

<!-- 添加监护人模态框 -->
<div class="modal fade" id="addGuardianModal" tabindex="-1" role="dialog" aria-labelledby="addGuardianModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addGuardianModalLabel">添加监护人</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <!-- 添加头像上传预览区域 -->
          <div class="form-group text-center">
            <div class="avatar-preview mb-3">
              <img id="guardianAvatarPreview"  alt="监护人头像"  title="监护人头像" src="../img/bg/default-avatar.jpg"
                   class="rounded-circle" style="width: 150px; height: 150px; object-fit: cover;">
            </div>
            <div class="avatar-upload">
              <label for="guardianAvatarInput" class="btn btn-outline-primary">
                选择头像
              </label>
              <input type="file" class="d-none" id="guardianAvatarInput" accept="image/*">
            </div>
          </div>
          <!-- 有的表单字段 -->
          <div class="form-group">
            <label for="addGuardianName">姓名</label>
            <input type="text" class="form-control" id="addGuardianName" placeholder="请输入姓名">
          </div>
          <div class="form-group">
            <label for="addGuardianAge">年龄</label>
            <input type="number" class="form-control" id="addGuardianAge" placeholder="请输入年龄">
          </div>
          <div class="form-group">
            <label>性别</label>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="guardianGender" id="genderMale" value="男" checked>
              <label class="form-check-label" for="genderMale">男</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="guardianGender" id="genderFemale" value="女">
              <label class="form-check-label" for="genderFemale">女</label>
            </div>
          </div>
          <div class="form-group">
            <label for="addGuardianPhone">联系方式</label>
            <input type="tel" class="form-control" id="addGuardianPhone" placeholder="请输入手机号">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="saveNewGuardian()">保存</button>
      </div>
    </div>
  </div>
</div>

<!-- 头像预览放大模态框 -->
<div class="modal fade" id="avatarPreviewModal" tabindex="-1" role="dialog" aria-labelledby="avatarPreviewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="avatarPreviewModalLabel">头像预览</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <img id="avatarPreviewLarge" src="" style="max-width: 100%; max-height: 500px;">
      </div>
    </div>
  </div>
</div>

<!-- 发送信息模态框 -->
<div class="modal fade" id="sendMessageModal" tabindex="-1" role="dialog" aria-labelledby="sendMessageModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="sendMessageModalLabel">发送信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="messageRecipient">收件人</label>
            <input type="text" class="form-control" id="messageRecipient" readonly>
            <input type="hidden" id="messageRecipientId">
          </div>
          <div class="form-group">
            <label for="messageTitle">标题</label>
            <input type="text" class="form-control" id="messageTitle" placeholder="请输入标题">
          </div>
          <div class="form-group">
            <label for="messageContent">内容</label>
            <textarea class="form-control" id="messageContent" rows="4" placeholder="请输入内容"></textarea>
          </div>
          <div class="form-group">
            <label for="messageImage">添加图片</label>
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="messageImage" accept="image/*">
              <label class="custom-file-label" for="messageImage">预览</label>
            </div>
            <div id="imagePreview" class="mt-2" style="display: none;">
              <img id="previewImg" src="" class="img-fluid" style="max-height: 200px;">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="sendMessage()">发送</button>
      </div>
    </div>
  </div>
</div>

<!-- 新增换课申请模态框 -->
<div class="modal fade" id="addChangeRequestModal" tabindex="-1" role="dialog" aria-labelledby="addChangeRequestModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addChangeRequestModalLabel">新增换课申请</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="studentName">学生姓名</label>
            <input type="text" class="form-control" id="studentName" placeholder="请输入学生姓名">
          </div>
          <div class="form-group">
            <label for="originalCourse">原课程</label>
            <input type="text" class="form-control" id="originalCourse" placeholder="请输入原课程">
          </div>
          <div class="form-group">
            <label for="requestedCourse">申请换课</label>
            <input type="text" class="form-control" id="requestedCourse" placeholder="请输入申请换课">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="submitChangeRequest()">提交申请</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

<script type="text/javascript" src="../layui/layui.js"></script><!--layui-->
<script type="text/javascript" src="../js/public/bootstrap.min.js"></script><!--BS框架-->
<script type="text/javascript" src="../js/bg/class.js"></script><!--课程安排-->
<script type="text/javascript" src="../js/bg/ClassReady.js"></script><!--预编辑课程-->
<script type="text/javascript" src="../js/bg/bg.js"></script><!--后台架-->
<script type="text/javascript" src="../js/bg/guardians.js"></script><!--监护人-->
<script type="text/javascript" src="../js/bg/app.js"></script>